<template>
  <div class="react">
    <ul class="ul">
      <router-link
        to="/about"
        active-class="activeClass"
        custom
        v-slot="{ navgator,href,route }"
      >
        <a
          :href="href"
          @click="navgator"
        >
          {{ route.fullPath }}
        </a>
      </router-link>

      <router-link
        to="/keepAliveAbout"
        active-class="activeClass"
      >
        router-link-keepAliveAbout
      </router-link>
    </ul>
    <div class="clearfix">
      <a-upload
        v-model:file-list="fileList"
        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        list-type="picture-card"
        @preview="handlePreview"
      >
        <div v-if="fileList&&fileList?.length < 3">
          <plus-outlined />
          <div style="margin-top: 8px">
            上传
          </div>
        </div>
      </a-upload>
      <a-modal
        :visible="previewVisible"
        :title="previewTitle"
        :footer="null"
        @cancel="handleCancel"
      >
        <img
          alt="example"
          style="width: 100%"
          :src="previewImage"
        >
      </a-modal>
      <a-collapse v-model:activeKey="activeKey">
        <a-collapse-panel
          key="3"
          header="This is panel header 3"
          @click.right="rightClick"
        >
          <p>{{ text }}</p>
        </a-collapse-panel>
      </a-collapse>
    </div>
    <vComponent />
    <teleport to="body">
      <div
        class="mask"
        v-if="show"
      >
        <div
          class="react-modal"
        >
          <a-button
            type="primary"
            @click="show=!show"
          >
            onshow
          </a-button>
        </div>
      </div>
    </teleport>
    <!-- <div class="box">
      <img
        alt="react logo"
        src="public/react.png"
        class="imgs"
      >
      <img
        alt="react logo"
        src="public/react.png"
        class="imgs imgone"
      >      <img
        alt="react logo"
        src="public/react.png"
        class="imgs imgtwo"
      >      <img
        alt="react logo"
        src="public/react.png"
        class="imgs imgthree"
      >      <img
        alt="react logo"
        src="public/react.png"
        class="imgs imgfour"
      >      <img
        alt="react logo"
        src="public/react.png"
        class="imgs imgfive"
      >
    </div> -->
  </div>
  <router-view />
  <HelloWorld @add="add" />
  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
</template>
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import { PlusOutlined } from '@ant-design/icons-vue'
import type { UploadProps } from 'ant-design-vue'
import { ref } from 'vue'
const activeKey = ref<Array<string>>(['1'])
const text = ref<string>('text-----card')
const getBase64 = (file: File) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
const add = (value:any) => {
  console.log(value, 'value')
}
// 鼠标右击事件
const rightClick = (e:MouseEvent) => {
  e.preventDefault()
  e.stopPropagation()
  show.value = !show.value
}
const show = ref<boolean>(false)
const previewVisible = ref(false)
const previewImage = ref('')
const previewTitle = ref('')
const fileList = ref<UploadProps['fileList']>([
  {
    uid: '-1',
    name: 'image.png',
    status: 'done',
    url: 'http://127.0.0.1:3000/src/assets/image/react.png'
  },
  {
    uid: '-5',
    name: 'image.png',
    status: 'error'
  }
])
const handleCancel = () => {
  previewVisible.value = false
  previewTitle.value = ''
}
// @ts-ignore
const handlePreview = async (file: UploadProps['fileList'][number]) => {
  if (!file.url && !file.preview) {
    file.preview = (await getBase64(file.originFileObj)) as string
  }
  previewImage.value = file.url || file.preview
  previewVisible.value = true
  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1)
}
</script>
<style scoped lang="less">
.react {
  box-sizing: border-box;
  border:  1px solid black;
  // background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  perspective: 1000;
  width: 100vw;
  height: 30vh;
  .box {
    width: 200px;
    height: 200px;
    // border-radius: 50%;
    transform-style: preserve-3d;
    transform-origin:100px 100px -100px;
    position: relative;
      // transition: all 9s linear;
    animation: translate 1s linear 0s infinite;
    .imgs {
      position: absolute;
      border-radius: 50%;
      border: 1px dotted red;
       }
       .imgone {
        transform-origin:right center;
        transform: rotateY(-85deg);
        border: 1px solid red;
       }
       .imgtwo{
         transform-origin:left center ;
         transform: rotateY(85deg);
        border: 1px solid rgb(20, 11, 186);

       }
       .imgthree{
          transform-origin:top center ;
          transform: rotateX(-85deg);
        border: 1px solid rgb(12, 224, 171);

       }
       .imgfour{
            transform-origin:bottom center ;
            transform: rotateX(85deg);
        border: 1px solid rgb(134, 237, 9);

       }
       .imgfive{
            transform-origin:center center ;
            transform:translateZ(-200px);
            border: 1px solid rgb(246, 246, 246);
       }
     }
}
@keyframes translate {
  0% {
    transform: rotate3d(1,1,1,0deg);
  }
  100% {
    transform: rotate3d(1,1,1,360deg);
  }
}
.mask{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:rgba(0,0,0,0.5);
  .react-modal{
  position: absolute;
  height: 100px;
  width: 100px;
  top: 50%;
  left: 50%;
  text-align: center;
  line-height: 100px;
  transform: translateX(-50px);
  transform: translatey(-50px);
}
}
.ul{
  list-style: none;
}
.activeClass{
  color: yellowgreen;
}
</style>
